<template>
  <div>
    <el-card class="box-card">
      <!-- 顶部区域 -->
      <page-up>
        <template v-slot:before>
          <el-input class="inputName" v-model.trim="inputName" placeholder="根据用户名搜索"></el-input>
          <el-button size="small" @click="clearData">清除</el-button>
          <el-button type="primary" size="small" @click="searchRandomData">搜索</el-button>
        </template>
        <template v-slot:after>
          <el-button type="success" size="small" icon="el-icon-edit" @click="addPermissionGroup">新增权限组</el-button>
        </template>
      </page-up>
      <!-- 提示文案 -->
      <el-alert
        style="margin:20px 0"
        :title="'数据一共 ' + total + ' 条'"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
      <!-- 多选table -->
      <el-table
        ref="multipleTable"
        :data="permissionTableData"
        tooltip-effect="dark"
        :header-cell-style="tableHeaderStyle"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="50">
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column
          prop="title"
          label="用户名">
        </el-table-column>
        <el-table-column
          sortable
          label="日期">
          <template slot-scope="{row}">{{ row.create_date | formatTime }}</template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="{row}">
            <el-button @click="edit(row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
            <el-button @click="del(row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align:right;margin-top:20px"
        background
        :current-page="permissionsParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="permissionsParams.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- add 弹层 -->
    <permissions-add
      ref="permissionsAdd"
      :text="text"
      :formBase="formBase"
      :pageTitle="pageTitle"
      :ruleInline="ruleInline"
      @handleCloseModal="handleCloseModal"
      @newDataes="getPermissionsList"
      />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import PageUp from '@/components/PageUp'
import { list as permissionsList, remove as delPermissions } from '@/api/base/permissions'
import PermissionsAdd from '../components/permissions-add'
export default {
  data () {
    return {
      inputName: '', // 根据用户名搜索的输入框内容
      total: 0, // 一共有多少条
      permissionTableData: [], // 权限列表数据
      multipleSelection: [], // 已选中权限
      permissionsParams: {
        page: 1,
        pagesize: 10
      },
      text: '创建',
      pageTitle: '权限组',
      ruleInline: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      id: '',
      formBase: {
        id: 0,
        create_date: '',
        title: '',
        permissions: []
      }
    }
  },
  components: {
    PageUp,
    PermissionsAdd
  },
  created () {
    this.getPermissionsList()
  },

  filters: {
    // 时间格式化
    formatTime (val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  methods: {
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#606266'
      } else {
        return ''
      }
    },
    // 列表数据
    async getPermissionsList () {
      const res = await permissionsList(this.permissionsParams)
      console.log(res)
      this.permissionTableData = res.data.list
      this.total = res.data.counts
    },
    // 清除数据
    clearData () {
      this.inputName = ''
    },
    // 搜索数据
    searchRandomData () {
      this.permissionsParams.title = this.inputName
      this.getPermissionsList()
    },
    // 新增权限组
    addPermissionGroup () {
      this.text = '创建'
      this.formBase = {
        id: 0,
        create_date: '',
        title: '',
        permissions: []
      }
      this.$refs.permissionsAdd.dialogFormV()
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 删除
    del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delPermissions({
          id: id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPermissionsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击编辑
    edit (id) {
      this.id = id
      this.text = '编辑'
      console.log(this.id)
      this.$refs.permissionsAdd.dialogFormV()
      this.$refs.permissionsAdd.hanldeEditForm(id)
    },
    handleSizeChange (val) {
      this.permissionsParams.pagesize = val
      this.getPermissionsList()
    },
    handleCurrentChange (val) {
      this.permissionsParams.page = val
      this.getPermissionsList()
    },
    // 弹层关闭
    handleCloseModal () {
      this.$refs.permissionsAdd.dialogFormH()
      // this.$refs.permissionsAdd.handleResetForm()
      this.formBase = {
        id: 0,
        title: '',
        permissions: []
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .box-card {
    margin: 20px;
    font-size: 14px;
  }
  // card内部padding :20px的
  .item {
    padding: 20px 0;
  }
  .inputName{
    width: 190px;
    margin-right: 10px;
  }
  /deep/.el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-pagination{
    margin-top: 20px;
  }
  /deep/.el-table th.el-table__cell>.cell{
    color: #909399;
  }
  /deep/.el-table th > .cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>
